<template>
	<view class="content">
		<view class="main">
			<view class="top_sopping">
				<!-- <image class="image_postin" style="width: 100%;height: 100%;" src="/static/组 310.png" mode=""></image> -->
				<view class="navgatin">
					<view class="navgatin_back">
						<image class="backs" style="width: 50rpx;height: 50rpx;" src="/static/后退 (1).png" mode="" @click="backs()"></image>
					</view>
					<view class="navgatin_seachr">
						<view class="xiaolis">
							<u-search class="inputs" :showAction="false" bgColor="#090909" placeholder="搜索店内商品" v-model="keyword"></u-search>
						</view>
					</view>
				</view>
				<view class="shopping_dp">
					<view class="dp_left">
						<image class="dp_img" :src="image+datas.logo" mode=""></image>
					</view>
					<view class="dp_center">
						<p class="dp_name">{{datas.name}}</p>
						<p class="dp_title" style="color: #B2BBBB;font-size: 25rpx;">{{datas.label[0].value}} &emsp;{{datas.label[1].value}}&emsp;{{datas.shopsMedal.name}}</p>
					</view>
					<view class="dp_right">
						<u-button class="btns" text="收藏"></u-button>
					</view>
				</view>
				<view class="curd_fls">
					<view class="fle_tops">
						商品
					</view>
					<view class="fls_btms">
						<view class="btms_list" v-for="(item,index) in data" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
				<view class="curdlists">
					<view class="curdcaos">
						<phoneListVue :phoneList="phoneList"></phoneListVue>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		Collent,
		Page,
		shop_list
	} from "../../../api/api.js"
	import phoneListVue from "../../../common/my/phone-list/phone-list.vue"
	import navgatie from "../../../common/navgats/navgats.vue"
	export default {
		data() {
			return {
				data:[
					{
						name:"综合排序"
					},
					{
						name:"成新度"
					},
					{
						name:"租期"
					}
				],
				phoneList: [],
				datas:[],
				image:"https://api.jingkakeji.com"
			}
		},
		components:{
			navgatie,
			phoneListVue
		},
		mounted() {
			this.shopps()
			this.onpages()
		},
		methods: {
			async shopps(){
				let data={
					page:1,
					limit:10,
					name:"官方"
				}
				let res=await shop_list()
				console.log(res.data.data.data[0],"rrrrrrrrr")
				this.datas=res.data.data.data[0]
			},
			backs(){
				let canNavBack = getCurrentPages()
				if (canNavBack && canNavBack.length > 1) {
					uni.navigateBack()
				} else {
					history.back();
				}
			},
			async onpages() {
				let res = await Page()
				if (res.data.code == 1) {
					this.phoneList = res.data.data.clearance
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
		*{
			
		}
		.content{
				width: 100vw;
				height: 100vh;
				/* position: absolute; */
				background-color: #F6F6F6;
				// display: flex;
				// flex-direction: column;
				// align-items: center;
				overflow-y: auto;
			}
			.main{
				width: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
			}
			.top_sopping{
				width: 100%;
				height: 390rpx;
				background-color: #070606;
				position: relative;
				z-index: 2;
				//图片
					background-image: url("/static/组 310.png");
					//使背景图像完全覆盖屏幕，背景图像的某些部分也许无法显示在背景定位区域中。
				 	background-size:cover;
				 	//设置背景图像是否固定,不随着页面的其余部分滚动。
					background-attachment: fixed;
				 	//设置背景图片不平铺
					background-repeat:no-repeat;
				
			}
			.backs{
			margin-top: 30rpx;
			margin-left: 20rpx;
			}
			.navgatin{
				width: 100%;
				height: 140rpx;
				display: flex;
				.navgatin_back{
					width: 10%;
					height: 100%;
				}
				.navgatin_seachr{
					width: 90%;
					height: 100%;
					.xiaolis{
						width: 500rpx;
						margin-top: 25rpx;
					}
					.inputs{
						width: 500rpx;
						
					}
				}
			}
			.shopping_dp{
				width: 100%;
				height: 250rpx;
				display: flex;
				.dp_left{
					width: 30%;
					height: 100%;
					.dp_img{
						width: 150rpx;
						height: 150rpx;
						margin-top: 30rpx;
						margin-left: 20rpx;
					}
				}
				.dp_center{
					flex: 1;
					
					.dp_name{
						font-size: 40rpx;
						margin-top: 30rpx;
						color: #ffffff;
					}
					.dp_title{
						margin-top: 50rpx;
					}
				}
				.dp_right{
					width: 20%;
					height: 100%;
					.btns{
						width: 120rpx;
						height: 70rpx;
						background-color:#FCD748;
						border: none;
						border-radius: 40rpx;
						margin-top: 60rpx;
					}
					
				}
			}
			.curd_fls{
				width: 100%;
				height: 160rpx;
				
				overflow: hidden;
				.fle_tops{
					width: 100%;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					font-size: 30rpx;
					
				}
				.fls_btms{
					width: 100%;
					height: 80rpx;
					display: flex;
					.btms_list{
						width: 33.33%;
						height: 100%;
						text-align: center;
						line-height: 80rpx;
					}
				}
			}
			.curdlists{
				width: 100%;
				height: 1000rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				.curdcaos{
					width: 95%;
					height: 1000rpx;
				}
				
			}
</style>
